<template>
  <!-- 关联设备 -->
  <el-dialog v-dialogDrag :close-on-click-modal="false" title="关联设备" :visible.sync="dialogVisible" width="1000px" @close="closeBtn()">
    <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
    <div class="formTopFont">关联设备</div>
    <div>
      <div class="level">
        <div class="leftThree">
          <leftTree ref="leftTree" :data="treeData" node-key="id" :default-props="defaultProps" search-key="typeName" width="200px" :default-expand-keys="defaultExpandKeys" :defalut-expand-all="true" @handleNodeClickAll="handleNodeClick" />
        </div>
        <!-- 左边框框 -->
        <div class="transferbox">
          <!-- 未选择设备列表 -->
          <div class="titlebox">
            <span>未选择设备列表</span>
          </div>
          <div class="searchbox">
            <el-input v-model="search.keyword" clearable @keyup.enter.native="getEqLeft(rows)" @clear="getEqLeft(rows)" prefix-icon="el-icon-search" size="mini" placeholder="请输入名称或编码进行搜索" />
          </div>
          <el-row>
            <el-table ref="multipleTable" border :data="notChooseTable" height="410" stripe @selection-change="handleSelectionChange">
              <el-table-column type="selection" :selectable="selectable" width="40px" align="center" />
              <el-table-column show-overflow-tooltip label="设备名称" prop="equipName">
                <template #default="{ row }">{{row.equipName}}{{row.equipCode ? '(' + row.equipCode + ')' : ''}}</template>
              </el-table-column>
              <el-table-column show-overflow-tooltip label="设备类型" prop="type" />
            </el-table>
          </el-row>
        </div>
        <!-- 中间按钮 -->
        <div class="vertical center3 centrebtn">
          <el-button size="mini" type="primary" icon="el-icon-arrow-right" :disabled="multipleSelection.length === 0" @click="mangeRight" />
          <el-button size="mini" type="primary" style="margin:20px 0 0 0" icon="el-icon-arrow-left" :disabled="multipleSelection2.length === 0" @click="mangeLeft" />
        </div>
        <!-- 右边框框 -->
        <div class="transferbox">
          <!-- 已选择设备列表 -->
          <div class="titlebox">
            <span>已选择设备列表</span>
          </div>
          <div class="searchbox">
            <el-input v-model="search2.keyword" clearable @keyup.enter.native="getEqRight(rows)" @clear="getEqRight(rows)" prefix-icon="el-icon-search" size="mini" placeholder="请输入名称或编码进行搜索" />
          </div>
          <el-row>
            <el-table ref="multipleTable" border :data="hasChooseTable" height="410" stripe @selection-change="handleSelectionChange2">
              <el-table-column type="selection" width="40px" align="center" />
              <el-table-column show-overflow-tooltip label="设备名称" prop="equipName">
                <template #default="{ row }">{{row.equipName}}{{row.equipCode ? '(' + row.equipCode + ')' : ''}}</template>
              </el-table-column>
              <el-table-column show-overflow-tooltip label="设备类型" prop="type" />
            </el-table>
          </el-row>
        </div>
      </div>
      <div class="dialog-btn">
        <el-button size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button v-noMoreClick type="primary" size="mini" @click="submitTable">保存</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import leftTree from '@/components/LeftTree'
export default {
  components: {
    leftTree
  },
  name: 'EqDistribution',
  props: {
    tableData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      defaultExpandKeys: ['-1'],
      /** 未分配搜索字段 */
      findNotexistEQ: '',
      /** 已分配搜索字段 */
      findexistEQ: '',
      /** 未分配设备表格选择数组 */
      multipleSelection: [],
      /** 已分配设备表格选择数组 */
      multipleSelection2: [],
      /** 弹窗 */
      dialogVisible: false,
      /** 未分配设备 */
      notChooseTable: [],
      /** 已分配设备 */
      hasChooseTable: [],
      nameInfo: '',
      search: {
        id: '',
        keyword: '',
        treeStr: '-1'
      },
      search2: {
        id: '',
        keyword: '',
        treeStr: '-1'
      },
      rows: {}
    }
  },
  watch: {
    // tableData: {
    //   handler(news) {
    //     this.notChooseTable = news.noSelected
    //     this.hasChooseTable = news.select
    //     this.nameInfo = news.nameInfo
    //     this.url = news.url
    //   }
    // }
  },
  mounted() {},
  methods: {
    async getEqAll(row) {
      this.rows = row
      this.getEqLeft(row)
      this.getEqRight(row)
      this.getAllClassify()
      this.dialogVisible = true
    },
    async getEqLeft(row) {
      this.search.id = row.id
      /** 未选择设备 */
      const res = await this.$axios.post(
        `/pro/procedure/notChooseEquip`,
        this.search
      )
      if (res.data.code === 200) {
        this.notChooseTable = res.data.data
      }
    },
    async getEqRight(row) {
      this.search2.id = row.id
      /** 已选择设备 */
      const res = await this.$axios.post(
        `/pro/procedure/chooseEquip`,
        this.search2
      )
      if (res.data.code === 200) {
        this.hasChooseTable = res.data.data
      }
    },
    /**
     * @description: 查询所有设备类型
     * @return {*}
     */
    async getAllClassify() {
      const res = await this.$axios.get('/equip/info/allClassify')
      if (res?.data.code === 200) {
        this.treeData = [
          {
            id: '-1',
            typeName: '设备类型目录',
            children: this.arrConvert(res.data.data)
          }
        ]
      }
    },
    arrConvert(arr) {
      let arr2 = []
      for (let key in arr) {
        let obj = {
          typeName: arr[key],
          id: arr[key]
        }
        arr2.push(obj)
      }
      return arr2
    },
    selectable(row, index) {
      if (this.nameInfo.equipName === '设备') {
        if (!row.id) {
          return true
        } else {
          return false
        }
      } else {
        return true
      }
    },
    handleNodeClick({ data, node }) {
      this.search.treeStr =
        data.typeName === '设备类型目录' ? '-1' : data.typeName
      this.search2.treeStr =
        data.typeName === '设备类型目录' ? '-1' : data.typeName
      this.getEqLeft(this.rows)
      this.getEqRight(this.rows)
    },
    /** 未分配人员勾选 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /** 已分配人员勾选 */
    handleSelectionChange2(val) {
      this.multipleSelection2 = val
    },
    /** 往右 */
    mangeRight() {
      const manArr = this.multipleSelection
      this.notChooseTable = this.array_diff(this.notChooseTable, manArr).sort(
        this.compare('id')
      )
      this.hasChooseTable = manArr
        .concat(this.hasChooseTable)
        .sort(this.compare('id'))
    },
    /** 往左 */
    mangeLeft() {
      const manArr = this.multipleSelection2
      this.hasChooseTable = this.array_diff(this.hasChooseTable, manArr).sort(
        this.compare('id')
      )
      this.notChooseTable = manArr
        .concat(this.notChooseTable)
        .sort(this.compare('id'))
    },
    /* 删除相同的 */
    array_diff(a, b) {
      for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < a.length; j++) {
          if (a[j] === b[i]) {
            a.splice(j, 1)
            j = j - 1
          }
        }
      }
      return a
    },
    /** 排序 */
    compare(prop) {
      return function (obj1, obj2) {
        var val1 = obj1[prop]
        var val2 = obj2[prop]
        if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
          val1 = Number(val1)
          val2 = Number(val2)
        }
        if (val1 < val2) {
          return -1
        } else if (val1 > val2) {
          return 1
        } else {
          return 0
        }
      }
    },
    /** 保存已选择设备 */
    async submitTable() {
      // const arr = []
      // this.hasChooseTable.forEach((item) => arr.push(item.id))
      const res = await this.$axios.post(
        `/pro/procedure/saveEquip/${this.rows.id}`,
        this.hasChooseTable
      )
      if (res.data.code === 200) {
        this.$message.success('关联成功') // 分配成功
        this.dialogVisible = false
        this.$emit('getTableInfo')
      }
    },
    closeBtn() {
      this.notChooseTable = []
      this.hasChooseTable = []
      this.search = {
        id: '',
        keyword: '',
        treeStr: '-1'
      }
      this.search2 = {
        id: '',
        keyword: '',
        treeStr: '-1'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.leftThree {
  height: 490px;
  width: 210px;
  overflow-y: auto;
  margin-right: 10px;
  background: #f6f6f6;
  padding: 10px 5px 0 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.transferbox {
  width: 342px;
  .topbox {
    margin: 10px 10px;
  }
  .searchbox {
    margin: 0 0px 10px 0px;
    .el-col {
      line-height: 37px;
      font-size: 13px;
      color: #444;
    }
  }
}
.centrebtn {
  width: 40px;
  margin: 0 10px 0 10px;
  background-color: #fff;
  color: #ffff;
}
/* 垂直水平居中 */
.center3 {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 水平布局 */
.level {
  display: flex;
  flex-direction: row;
  text-align: center;
  // height: 400px;
  .titlebox {
    background: #f5f5f5;
    font-size: 18px;
    color: #333;
    height: 35px;
    line-height: 35px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 14px;
    width: 342px;
  }
}
// 垂直布局
.vertical {
  display: flex;
  flex-direction: column;
  height: 400px;
}
.dialog-btn {
  text-align: right;
}
</style>
<style lang="scss">
.searchbox {
  .el-input__inner {
    height: 32px !important;
  }
}
</style>
